<template>
	<div class="login">
		<h3>登录页</h3>
		<!--<el-input v-model="userName" placeholder="请输入内容"></el-input>-->
		<el-form :model="user" label-position="right" label-width="80px">
			<el-form-item label="用户名：">
				<el-input type="" v-model="user.userName"></el-input>
			</el-form-item>
			<el-form-item label="密码：">
				<el-input type="password" v-model="user.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleLoginClick">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				user:{
					userName:null,
					password:null
				}
			}
		},
		methods:{
			handleLoginClick(){
				if(this.user.userName===null||this.user.userName===''){
					this.$message('用户名不能为空');
					return;
				}
				if(this.user.password===null||this.user.password===''){
					this.$message('密码不能为空');
					return;
				}
				this.$router.push('/main');
			}
		}
	}
</script>

<style scoped>
	.login{
		width:400px;
		position: absolute;
		top:10%;
		left:50%;
		margin-left:-200px;
	}
</style>